<template>
  <div class="bookConfirnation">
    <div class="bookConfirnation-title">订货确认</div>
    <div class="bookConfirnation-box-massage">
      <img src="../../../assets/image/sellerHub/error.png"
           alt=""
           width="16"
           height="16">
      提示：当前您有<span>({{total}})</span>个订货需求<span>待确认</span>，请尽快处理避免造成损失。
      <i @click="clickOrderHistoryPage">
        <img src="../../../assets/image/sellerHub/bianzu12.png"
             alt="">
        查看已确认历史</i>
    </div>
    <div class="bookConfirnation-content">
      <div v-for="item in listPage"
           :key="item.id">
        <div class="bookConfirnation-header">
          <img src="../../../assets/image/sellerHub/shalou.png"
               alt="">
          剩余截止时间： <div>{{item.newHouer}} : {{item.newMinute}}</div>
          <!-- 0表示待确认，1表示部分确认，2表示已确认 -->
          <i v-if="item.status === 0"
             class="yello">待确认</i>
          <i v-if="item.status === 1"
             class="green">部分确认</i>
          <i v-if="item.status === 2"
             class="green">已确认</i>
        </div>
        <div class="bookConfirnation-box">
          <div>
            <p>{{item.materialNum}}</p>
            <p>商品（款）</p>
          </div>
          <div>
            <p>{{item.materialTotalNum}}</p>
            <p>数量（个）</p>
          </div>
          <div>
            <p class="red">￥{{item.money}}.00</p>
            <p>金额（元）</p>
          </div>
        </div>
        <div class="bookConfirnation-list">
          <div v-for="item1 in item.materialConfirmDetailDTOList1"
               :key="item1.id">
            <i></i>{{item1.materialName}}
            <span>{{item1.requireNum}}件</span>
          </div>
          <div class="dian">
            ...
          </div>
        </div>
        <div class="bookConfirnation-footer"
             @click="clickok(item)"
             v-if="item.status !==2">
          立即确认
        </div>
      </div>
    </div>
    <!-- //暂无页面 -->
    <div v-if="listPage.length === 0"
         class="bookConfirnation-content1">
      <img src="../../../assets/image/sellerHub/zanwuxinxi.png"
           alt="">
      <p>暂无信息</p>
    </div>
    <!-- //历史订单组件 -->
    <!-- orderHistory -->
    <orderHistory ref="orderHistoryPage"
                  :visible="visibles"
                  @confirmOrderHistory="confirmOrderHistory"
                  @cancel="visibles = false"></orderHistory>
    <!-- //立即确定组件 -->
    <ImmediatelyDetermine ref="ImmediatelyDeterminePage"
                          :visible="visibles1"
                          @confirmImmediatelyDetermine="confirmImmediatelyDetermine"
                          @cancel="visibles1 = false">

    </ImmediatelyDetermine>
  </div>
</template>
<script>
import orderHistory from "./components/orderHistory";
import ImmediatelyDetermine from "./components/ImmediatelyDetermine";

export default {
  components: {
    orderHistory,
    ImmediatelyDetermine
  },
  data () {
    return {
      visibles: false,
      visibles1: false,
      listPage: [],
      total: '0',
      list: {
        pageNo: '1',
        pageSize: '100000'
      }
    }
  },
  mounted () {
    this.getPage()
  },
  methods: {
    //获取列表
    getPage () {
      this.$store.dispatch('request', this.$api.sellerCenter.orderConfirmationPage(this.list)).then(res => {
        this.listPage = res.result.records
        this.total = res.result.total
        let newTime = new Date().getTime()
        for (var i = 0; i < this.listPage.length; i++) {
          let num = 0
          for (var j = 0; j < this.listPage[i].materialConfirmDetailDTOList.length; j++) {
            num = Number(num) + Number(this.listPage[i].materialConfirmDetailDTOList[j].materialPrice)
          }
          this.listPage[i].money = num
          console.log(num, 'materialPrice');
          let Time = new Date(this.listPage[i].validTime).getTime() - newTime
          if (this.listPage[i].materialConfirmDetailDTOList.length > 3) {
            this.listPage[i].materialConfirmDetailDTOList1 = this.listPage[i].materialConfirmDetailDTOList.slice(0, 3)
          } else {
            this.listPage[i].materialConfirmDetailDTOList1 = this.listPage[i].materialConfirmDetailDTOList
          }

          //计算出相差天数
          let days = Math.floor(Time / (24 * 3600 * 1000));
          //计算出小时数
          let leave1 = Time % (24 * 3600 * 1000);
          //计算天数后剩余的毫秒数
          let hours = Math.floor(leave1 / (3600 * 1000));
          //计算相差分钟数
          let leave2 = leave1 % (3600 * 1000);
          //计算小时数后剩余的毫秒数
          let minutes = Math.floor(leave2 / (60 * 1000));
          //计算相差秒数
          let leave3 = leave2 % (60 * 1000);
          //计算分钟数后剩余的毫秒数
          let seconds = Math.round(leave3 / 1000);

          hours = hours < 10 ? '0' + hours : hours;
          minutes = minutes < 10 ? '0' + minutes : minutes;
          seconds = seconds < 10 ? '0' + seconds : seconds;

          this.listPage[i].newDay = days;
          this.listPage[i].newHouer = hours;
          this.listPage[i].newMinute = minutes;
          this.listPage[i].newSs = seconds;
        }
        console.log(this.listPage);
      })

    },
    //打开历史订货组件
    clickOrderHistoryPage () {
      this.visibles = true
      this.$refs.orderHistoryPage.getList();
    },
    //历史订货组件回执方法
    confirmOrderHistory () {
      this.visibles = false
    },
    //打开立即开始组件
    clickok (item) {
      console.log(123123)
      this.visibles1 = true
      this.$refs.ImmediatelyDeterminePage.getList(item);
    },
    //立即开始组件回执
    confirmImmediatelyDetermine () {
      this.visibles1 = false
    },

  },
}
</script>
<style lang="less" scoped>
.yello,
.green {
  position: absolute;
  width: 80px;
  height: 28px;
  background: #fff6eb;
  color: #fe8406;
  font-style: normal;
  font-size: 12px;
  line-height: 28px;
  border-radius: 100px 0px 0px 100px;
  right: 0;
  top: 0;
  text-align: center;
}
.green {
  background: #f5fbf3;
  color: #79c860;
}
.red {
  color: @activeRed !important;
}
.bookConfirnation {
  height: 100%;
  .bookConfirnation-title {
    height: 54px;
    width: 100%;
    background: #fff;
    padding-left: 24px;
    line-height: 54px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: @newColorGreyFontM;
    margin-bottom: 16px;
  }
  .bookConfirnation-box-massage {
    height: 41px;
    line-height: 40px;
    padding-left: 25px;
    margin: 0 16px 16px 16px;
    color: @newColorGreyFontM;
    font-size: 12px;
    border: 1px solid rgba(255, 144, 3, 0.2);
    background: rgba(255, 144, 3, 0.06);
    img {
      vertical-align: sub;
      margin-right: 8px;
    }
    span {
      color: @activeRed;
      padding: 0 8px;
    }
    span:nth-child(3) {
      color: rgba(254, 132, 6, 1);
    }
    i {
      color: @activeRed;
      font-style: normal;
      cursor: pointer;
      float: right;
      width: 132px;
      height: 24px;
      margin-top: 9px;
      text-align: center;
      border-radius: 2px;
      background: #fce9e1;
      line-height: 24px;
      margin-right: 24px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
    }
  }
  .bookConfirnation-content {
    overflow: hidden;
    margin-left: 16px;
    margin-right: 16px;
    > div {
      width: 24.25%;
      margin-right: 1%;
      margin-bottom: 16px;
      background: #fff;
      float: left;
      box-shadow: 0px 0px 6px 0px rgba(39, 36, 36, 0.04);
      border-radius: 2px;
      padding-top: 18px;
      .bookConfirnation-header {
        position: relative;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        padding: 0 16px;
        margin-bottom: 16px;
        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        > div {
          width: 66px;
          height: 26px;
          display: inline-block;
          line-height: 24px;
          border-radius: 2px;
          border: 1px solid @activeRed;
          text-align: center;
          font-size: 16px;
          font-weight: 700;
          color: @activeRed;
          background: #fcefef;
        }
      }
    }
    > div:nth-child(4n) {
      margin-right: 0;
    }
  }
  .bookConfirnation-content1 {
    height: 600px;
    background: #fff;
    margin: 0 16px 16px 16px;
    text-align: center;
    img {
      margin-top: 7%;
    }
    p {
      text-align: center;
      margin-top: 30px;
    }
  }
  .bookConfirnation-box {
    background: #fafafa;
    height: 89px;
    margin-bottom: 16px;
    padding: 0 16px;
    > div {
      width: 33.3%;
      height: 100%;
      float: left;
      position: relative;
      padding: 16px 12px;
      > p:nth-child(1) {
        font-size: 22px;
        font-weight: 700;
        color: @newColorGreyFontM;
        margin-bottom: 0;
      }
      > p:nth-child(2) {
        font-size: 12px;
        font-weight: 400;
        color: @newColorGreyFont;
        margin-top: 8px;
        margin-bottom: 0;
      }
    }
    > div::after {
      position: absolute;
      right: 0;
      top: 24px;
      content: "";
      width: 1px;
      height: 41px;
      background: #f2f2f2;
    }
    > div:nth-child(3)::after {
      background: #fff;
    }
  }
  .bookConfirnation-list {
    padding: 0 16px;
    > div {
      position: relative;
      padding-left: 12px;
      font-size: 12px;
      color: @newColorGreyFontM;
      margin-bottom: 8px;
      height: 17px;
      line-height: 17px;
      i {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background: #dadadd;
      }
      span {
        float: right;
      }
    }
    .dian {
      font-size: 16px;
      color: @activeRed;
      margin-bottom: 24px;
    }
  }
  .bookConfirnation-footer {
    height: 49px;
    line-height: 49px;
    border-top: 1px solid #f2f2f2;
    text-align: center;
    font-size: 12px;
    color: @activeRed;
    cursor: pointer;
    text-decoration: underline;
  }
}
@media screen and (max-width: 1440px) {
  .bookConfirnation {
    .bookConfirnation-content {
      > div {
        width: 32% !important;
      }
      > div:nth-child(4n) {
        margin-right: 1%;
      }
      > div:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
/deep/ .ant-message-notice {
  .ant-message-notice-content {
    box-shadow: 0px 10px 10px 0px rgba(39, 36, 36, 0.08);
    background: #e4f4df !important;
    color: #79c860 !important;
    font-size: 14px !important;
  }
}
</style>